<template>
  <div class="address-manage">
    <mt-cell
      is-link
      v-for="(item,idx) in getShippingAddrs"
      :key="item.id"
      :to="{ name: 'addressUpdate', query: { id: idx } }"
    >
      <div slot="title" class="address-infos">
        <div class="address-user">
          <b>{{ item.consigneeName }}</b>
          <span class="phone">{{ item.phone }}</span>
        </div>
        <div>{{ $store.getters.getFullAddr(item.id) }}{{ item.other }}</div>
      </div>
      <span slot="icon" class="iconfont icon-shouye"></span>
    </mt-cell>

    <div class="add-btn">
      <router-link :to="{ name: 'addShipAddress' }">
        <mt-button type="primary">+添加收货地址</mt-button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddressManage",
  data() {
    return {
      msg: "123",
    };
  },
  computed: {
    getShippingAddrs() {
      return this.$store.state.userInfo.shippingAddrs;
    },
  },
};
</script>

<style scoped>
.address-manage .mint-cell {
  padding: 6px 0;
  border-bottom: 1px solid var(--gray2);
}
.mint-cell >>> .mint-cell-title {
  display: flex;
  align-items: center;
}
.mint-cell-title .iconfont {
  font-size: 22px;
  color: var(--theme);
}
.address-infos {
  display: inline-flex;
  flex-direction: column;
  margin-left: 10px;
}
.address-user {
  margin-bottom: 8px;
}
.address-user >>> .phone {
  margin-left: 5px;
  color: var(--gray);
  font-size: 13px;
}
.add-btn {
  margin-top: 20px;
  padding: 0 20px;
}
.add-btn button {
  width: 100%;
}
</style>